<template>
    <div class="man">
        <div v-if="layoutMan.length > 0">
            <van-tabs
                v-model="active"
                animated
                color="#30acff"
                line-width="20px"
                line-height="2px"
                title-active-color="#000"
                title-inactive-color="#999"
                @change="initList"
            >
                <van-tab :title="item.name" v-for="(item, index) in layoutMan" :key="item.id">
                    <ul class="feeds" v-if="classfiyList[index]">
                        <router-link
                            tag="li"
                            :to="`/details/${item.item_id}`"
                            v-for="(item, i) in classfiyList[index]"
                            :key="i"
                        >
                            <van-image
                                width="44vw"
                                height="58.6vw"
                                lazy-load
                                fit="cover"
                                :src="`${item.image}@300w.jpg`"
                            />
                            <div class="title">{{ item.title }}</div>
                            <div class="left" v-if="item.comic_info.decision !== ''">
                                {{ item.comic_info.decision }}
                            </div>
                            <div v-else class="right">{{ item.comic_info.main_style_name }}</div>
                        </router-link>
                    </ul>
                    <div class="loading" v-if="loading">
                        <van-loading size="24px" vertical text-color="#0094ff" color="#0094ff"
                            >加载中...</van-loading
                        >
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import _ from "lodash";
export default {
    data() {
        return {
            active: 0,
            layoutMan: [],
            classfiyList: [],
            page: 1,
            loading: true,
            total: 0,
            pageSize: 0,
        };
    },
    created() {
        this.getLayoutMan();
    },
    mounted() {
        window.addEventListener("scroll", this.windowScroll);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.windowScroll);
    },
    methods: {
        //男生
        async getLayoutMan() {
            await this.axios.get("GetClassPageLayout?tabId=263").then((res) => {
                this.layoutMan = res.layout;
                this.getClassfiyList();
            });
        },
        async getClassfiyList() {
            if (!this.layoutMan) {
                return;
            }
            for (let i = 0; i < this.layoutMan.length; i++) {
                await this.axios
                    .get(
                        `GetHomeSecondaryComics?moduleId=${this.layoutMan[i].id}&pageNum=1&pageSize=10`
                    )
                    .then((res) => {
                        this.classfiyList.push(res.comics);
                    });
            }
        },
        // 单个分类下拉刷新
        async setClassfiyList(id, pageSize) {
            await this.axios
                .get(`GetHomeSecondaryComics?moduleId=${id}&pageNum=1&pageSize=${pageSize}`)
                .then((res) => {
                    this.total = 0;
                    this.total = res.comics.length;
                    this.classfiyList[this.active] = res.comics;
                    this.loading = false;
                    if (this.total < pageSize) {
                        this.loading = false;
                        window.removeEventListener("scroll", this.windowScroll);
                        return;
                    }
                });
        },
        //初始化
        initList() {
            this.total = 0;
            this.pageSize = 0;
            this.classfiyList.forEach((v) => {
                return v.splice(10);
            });
        },
        more() {
            this.page++;
            this.pageSize = this.page * 10;
            let id = this.layoutMan[this.active].id;
            this.loading = true;
            this.setClassfiyList(id, this.pageSize);
        },
        windowScroll: _.throttle(function () {
            //卷去的距离
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            scrollTop = Math.ceil(scrollTop);
            //页面的高度
            let contentHight = document.body.scrollHeight;
            //窗口内容的高度
            let clientHeight = window.innerHeight;
            if (scrollTop + clientHeight >= contentHight) {
                this.more();
            }
        }, 1000),
    },
};
</script>

<style lang="scss" scoped>
.man {
    position: relative;

    .feeds {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 16px;
        padding-bottom: 40px;

        li {
            padding: 15px 0;
            .title {
                width: 35vw;
                font-size: 14px;
                font-weight: bold;
                color: #212121;
                opacity: 0.8;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                padding-top: 5px;
                padding-left: 10px;
            }
            .left {
                margin-top: 3px;
                font-size: 12px;
                color: #fdc56f;
                padding: 5px 10px;
                display: inline-block;
                background: #fffbf2;
                padding-left: 10px;
            }
            .right {
                margin-top: 3px;
                font-size: 12px;
                color: #b8bbbf;
                padding-left: 10px;
                display: inline-block;
            }
        }
    }
    .loading {
        margin-top: 20px;
        margin-bottom: 50px;
    }
}
</style>
